設計大綱

原本想把Reviews做成一行六個、並且可以超出視窗，另外使用者可以用拖曳的方式去移動卡片。但看完Boostrap 5的官網，目前好像沒辦法切出超出視窗且可拖曳的卡片，所以就把原本想做的想法，改成「單純卡片式」的方式去呈現。

這次的Reviews卡片會包含「使用者頭像、使用者名稱、日期、回饋內容」。Grid system共12欄，因此這邊將會是「每個卡片佔4欄」，一行會有3個卡片。因為怕一行只有三個卡片會太少，所以這邊會設計「兩行的卡片」。

由於上一個區塊是以滿版去設計，所以這邊就不會用滿版去設計。另外，卡片會以主要色再加上漸層作為卡片的背景顏色唷！

步驟

畫出卡片及設定背景顏色

1. 在畫布上畫出4欄寬的卡片，高度先不用設定
2. 卡片背景顏色為Primary（#9B3C05）
3. 另外再加上Linear Gradient 漸層顏色（#9B3C05 > #4E1E03）

使用者的Profile Picture

1. 在卡片裡畫出96x96的圓形
2. 把icon圖片直接拖拉進去圓形裡面
3. 與上方和左方維持24px的間距

使用者的Profile Picture、留言日期

1. 在Profile Picture下方輸入「使用者的名稱」及「留言日期」
2. 文字的大小為p的大小（16px）
3. 文字的字重為regular
4. 文字的顏色為secondary（#FDFCFC）
5. 「使用者名稱」與「Profile Picture」維持16px的間距

留言內容

1. 在「使用者名稱與日期」的下方距離8px
2. 輸入「留言內容」
3. 文字的大小、字重、顏色都與「使用者名稱」相同
4. 與卡片下方間距24px
5. 此時卡片的高度就自然而然出來了

完成剩下的卡片

1. 點選已完成的卡片，再選取右上角的「Repeat Grid」
   
2. 往右、往下拉出兩行的「一行三個卡片」
   
3. 把剩下卡片的「Profile Picture」和「文案」作修改即可
   

調整間距

1. 再次確認卡片之間的間距是否為上下24px
2. 調整整個區塊的上下間距為96px
3. 完成!
   

結論

在設計前都可以先參考外面各種網頁的區塊，再想想Bootstrap有哪些元件可以提供切版，另外再來看要不要把原本的想法作修改，像這一次的Reviews區塊一樣。另外一樣是提醒到爛掉的「高度不用自己設定，用padding去推就好」 （不要嫌我煩哈哈哈哈哈）。
明天再來設計其他區塊吧！